

paceOption = {
    elements: {
    selectors: ['#img9','#img10','#img11']
  }
}


$(function(){
    v3 = document.getElementById("v3");         
    $(v3).show();
    $("#img10").show()
    $("#img11").show()
    //1.点击开始播放
    $("#start").click(
        function(){
                //2.播放按钮隐藏
                $("#start").hide()
                 v3 = document.getElementById("v3");
                // 3.视频开始播放
                    v3.play();
                
               //4.监听视频播放进度的定时器  薯片掉出屏幕
                // var timerV3_1 = setInterval(function(){
                //         if (v3.currentTime >=5 &&v3.currentTime<10){
                //             clearInterval(timerV3_1)
                //             v3.play()
                //             sp_animate()//=========================>
                            
                //         }
                // },250)
                //5.气味溢出动画
                // var timerV3_2 = setInterval(function(){
                //         if (v3.currentTime >=10 ){
                //          v3.play()
                //             clearInterval(timerV3_2)
                //             qw_animate()//========================>
                //         }
                // },250)
                //6.滑动提示图片弹出
                var timerV3_3 = setInterval(function(){ 
                        if (v3.currentTime >=88){
                            v3.currentTime =92
                            v3.play()
                            clearInterval(timerV3_3)
                            v3.pause()
                            //出现下滑提示图片
                            $("#img10").show()
                            $("#img10").css({"transform":"rotateX(0deg)"})
                            //监听下滑操作
                            v3_drag("img10",0,"#img9")//函数
                        }
                },250)


        }
    )
 
    Pace.start()
    Pace.on("done",function(){
            // $('body').css({"background-image": "url(img/8.png)",
            //                  "background-size": "cover",
            //                 "background-repeat": "no-repeat"});
            $(v3).show();
            $("#start").show()
    })
});


//下滑操作监听
function v3_drag(id,direction,img) {
        var obj1 = document.getElementById(id);
        obj1.addEventListener("touchstart", function(event) {
            var touch = event.targetTouches[0];
            var x = touch.pageX
            var y = touch.pageY
            obj1.addEventListener('touchmove', function(e) {
                X = e.targetTouches[0].pageX,
                Y = e.targetTouches[0].pageY;
                //获取滑动距离
                distanceX = X-x;
                distanceY = Y-y;
                //判断滑动方向 下滑操作
                if(direction===0){
                    if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>10){
                        var str="#"+id
                        $(str).hide()
                         v3.play()
                         var timerV3_4=setInterval(function(){
                                if(v3.currentTime>=92){
                                    // v3.play()

                                    v3.pause()


                                    clearInterval(timerV3_4)
                                    
                                    //7.img9  红唇飞入动画 后消失
                                    // $(img).slideDown("slow")
                                    // hcfr_animate()//========================>
                                    animate_p()
                                                
                                }
                            },500)

                        //8.视频播放完毕,分享动画开始
                        //  var timerV3_5=setInterval(function(){
                         //        if(v3.currentTime>=50){
                         //         v3.pause()
                         //         animate_p()
                         //         clearInterval(timerV3_5)
                                    
                         //        }
                            // },500)


                    }else{
                        v3.pause()
                } 
            }
            // if(direction===1){
            //    done()
            // }
            // if(direction===2){
            //    done()
            // }
            // if(direction===3){
            //  done()

            // }
        },true)
    })
}


//分享动画
function animate_p(){
    v3.pause()
    $("#v3").animate({opacity:"0.3"},100)
    $("#fenxiang").show()
    $("p").eq(0).animate({top:'25%'},500);
    setTimeout(()=>{$("p").eq(1).animate({left:"20%" },600);},500)
    setTimeout(()=>{$("p").eq(2).animate({left:"20%"},700);},1500)
    setTimeout(()=>{$("p").eq(3).animate({top:"40%"},800);},2000)
    setTimeout(()=>{$("p").eq(4).animate({left:"20%"},900);},2500)
    setTimeout(()=>{$("btn").eq(0).animate({top:"60%"},500);},3000)
    setTimeout(()=>{$("a").eq(0).animate({top:"60%"},500);},3000)
    $("btn").eq(0).click(function(){
        console.log(1111111111111)
     $("#fenxiang").hide()
     // $("#img11").show()
     $("#img11").css({"transform":"rotateY(0deg)"})
    })
}
    
// 薯片掉落动画
function sp_animate(){
    v3.play()
      $(".shupian").show()
      $("#sp").animate({top:"58%",left:"20%"})
      $("#sp1").animate({top:"65%"})
      $("#sp2").animate({top:"59%",left:"80%"})
      setTimeout(()=>{$(".shupian").hide()},400)

   
}


//气味溢出动画
function qw_animate(){
    //v3.play()
     console.log("气味溢出动画")
}  


//红唇飞入动画
function hcfr_animate(){
    $("#img9").show().animate({top:"50%",left:"40%"}).css({opacity:"0.4"})
    // setTimeout(()=>{$("#img9").hide()},1400)
}


























 

 
        



